<template>
    <div class="input-select-option"  :class="{'input-select-option-cover':check,'input-select-option-dark':theme==='dark'}" :data-label="label"
         :data-value="value" :data-item="item">
        <slot :label="label" :value="value">
            <div style="display: flex;justify-content: space-between">
                {{label||'text'}}
                <check class="input-select-option-icon"/>
            </div>
        </slot>
    </div>
</template>

<script>
    import check from './icon-check'

    export default {
        name: "tags-option",
        props: {
            label: String,
            value: String | Number,
            item: Object,
            theme: String
        },
        components: {check},
        data() {
            return {
                check: false
            }
        }
    }
</script>

<style scoped>
    .input-select-option {
        font-size: 14px;
        padding: 6px 8px;
        cursor: default;
        color: rgba(0,0,0, 0.65) ;
    }

    .input-select-option-dark {
        font-size: 14px;
        padding: 6px 8px;
        cursor: default;
        color: rgba(255, 255, 255, .65);
    }

    .input-select-option:hover {
        background: var(--hoverColor);
        font-weight: bold;
    }

    .input-select-option:hover .input-select-option-icon {
        visibility: visible;
    }

    .input-select-option-cover {
        background: #d9d9d9;
        font-weight: bold;
    }

    .input-select-option-icon {
        visibility: hidden;
        color: var(--primaryColor);
    }
</style>
